<template>
  <div>
    <span class="like">猜你喜欢</span>
    <ul>
      <li v-for="(v, index) in list" :key="index">
        <img :src="v.src" alt="" />
        <div>
          <span class="logo">{{ v.logo }}</span>
          <p>{{ v.details }}</p>
          <div class="price">
            <p>{{ v.price }}</p>
            <p class="similar">看相似</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://gw.alicdn.com/bao/uploaded/O1CN013Yw6LA1G4e9MGV7vP_!!6000000000569-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "Chigo/志高",
          details: "志高一级节能小冰柜家用全冷冻小型迷你省...",
          price: "￥398",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i4/6000000000153/O1CN01DNa2uV1D07JLquZKo_!!6000000000153-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "妙立",
          details: "厨房置物架家用收纳储物架子落地多层用品...",
          price: "￥18.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i2/6000000000136/O1CN01B8WGsn1CsKYpKtBcQ_!!6000000000136-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "MIUI/小米",
          details: "小米4c 4a 1200m家用电信宽带路由器",
          price: "￥69.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/O1CN013Yw6LA1G4e9MGV7vP_!!6000000000569-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "Chigo/志高",
          details: "志高一级节能小冰柜家用全冷冻小型迷你省...",
          price: "￥398",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i4/6000000000153/O1CN01DNa2uV1D07JLquZKo_!!6000000000153-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "妙立",
          details: "厨房置物架家用收纳储物架子落地多层用品...",
          price: "￥18.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i2/6000000000136/O1CN01B8WGsn1CsKYpKtBcQ_!!6000000000136-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "MIUI/小米",
          details: "小米4c 4a 1200m家用电信宽带路由器",
          price: "￥69.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/O1CN013Yw6LA1G4e9MGV7vP_!!6000000000569-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "Chigo/志高",
          details: "志高一级节能小冰柜家用全冷冻小型迷你省...",
          price: "￥398",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i4/6000000000153/O1CN01DNa2uV1D07JLquZKo_!!6000000000153-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "妙立",
          details: "厨房置物架家用收纳储物架子落地多层用品...",
          price: "￥18.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i2/6000000000136/O1CN01B8WGsn1CsKYpKtBcQ_!!6000000000136-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "MIUI/小米",
          details: "小米4c 4a 1200m家用电信宽带路由器",
          price: "￥69.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/O1CN013Yw6LA1G4e9MGV7vP_!!6000000000569-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "Chigo/志高",
          details: "志高一级节能小冰柜家用全冷冻小型迷你省...",
          price: "￥398",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i4/6000000000153/O1CN01DNa2uV1D07JLquZKo_!!6000000000153-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "妙立",
          details: "厨房置物架家用收纳储物架子落地多层用品...",
          price: "￥18.9",
        },
        {
          src: "https://gw.alicdn.com/bao/uploaded/i2/6000000000136/O1CN01B8WGsn1CsKYpKtBcQ_!!6000000000136-0-yinhe.jpg_290x10000Q75.jpg_.webp",
          logo: "MIUI/小米",
          details: "小米4c 4a 1200m家用电信宽带路由器",
          price: "￥69.9",
        },
      ],
    };
  },
};
</script>

<style scoped>
.like{
    margin: 10px;
    font-size: 20px;
    font-weight: bold;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
li {
  width: 168px;
  height: 276px;
}
img {
  width: 138px;
  height: 138px;
  padding: 20px;
  border: 1px solid rgb(213, 213, 213);
 
}
.logo {
  background-color: rgb(108, 160, 95);
}
.price {
  color: crimson;
  display: flex;
  justify-content: space-between;
}
.similar {
  width: 50px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: rgb(255, 203, 212);
  font-size: 12px;
  border-radius: 12px;
}
</style>